import { AutoComplete, AutoCompleteProps } from '@arco-design/web-react'
import React from 'react'
import { get } from 'lodash-es'

interface IPropertyEditorProps extends AutoCompleteProps {
    json?: any
}

const PropertyEditor: React.FC<IPropertyEditorProps> = ({ json, ...props }) => {
    const [data, setData] = useState<string[]>([])

    // 搜索
    const handleSearch = (inputValue: string) => {
        if (!json) {
            setData([])
            return
        }
        const splited = inputValue.split('.')
        if (splited.length < 2) {
            setData(Object.keys(json))
            return
        } else {
            const properties = splited
                .slice(0, splited.length - 1)
                .filter(Boolean)
                .join('.')
            const value = get(json, properties)
            if (value && typeof value === 'object') {
                console.log('setted', Object.keys(value))
                setData(Object.keys(value).map((key) => `${properties}.${key}`))
                return
            }
        }
        setData([])
        return
    }

    return <AutoComplete onSearch={handleSearch} data={data} {...props} />
}

export default PropertyEditor
